<template>
  <div>
    <!-- 如果 t-step-item 没有传入 value，则使用 index 作为唯一标识 -->
    <t-steps :default-current="1">
      <t-step-item title="已完成的步骤" />
      <t-step-item title="进行中的步骤" />
      <t-step-item title="未进行的步骤" />
      <t-step-item title="未进行的步骤" />
    </t-steps>
    <br />
    <!-- 使用 options 渲染步骤条 -->
    <t-steps v-model="current" :options="steps" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { StepsProps } from 'tdesign-vue-next';
const steps: StepsProps['options'] = [
  {
    title: '已完成的步骤',
    value: 'first',
    content: '点击切换步骤',
  },
  {
    title: '进行中的步骤',
    value: 'second',
    content: '点击切换步骤',
  },
  {
    title: '进行中的步骤',
    value: 'third',
    content: () => '这是进行中的步骤',
  },
  {
    title: '已完成的步骤',
    value: 'forth',
    content: '点击切换步骤',
  },
];
const current = ref('third');
</script>
